<html>
    <header>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
        .yongyin {
         width:100px;
         text-align:center;
         line-height:100%;
         padding:0.3em;
         font:16px Arial,sans-serif bold;
         font-style:normal;
         text-decoration:none;
         margin:2px;
         vertical-align:text-bottom;
         zoom:1;
         outline:none;
         font-size-adjust:none;
         font-stretch:normal;
         border-radius:4px;
       
         color:#fefee9;
         border:0.2px solid #2299ff;
         background-repeat:repeat;
         background-size:auto;
         background-origin:padding-box;
         background-clip:padding-box;
         background-color:#E73C2F;
         /*background: linear-gradient(to bottom, #eeeff9 0%,#3399ff 100%);*/
    }
     
    .yongyin:hover {
        background: #E73C2F;
    }
    </style>

        <script type="text/javascript">
            var payClick = function(){
                var callInfo = JSON.stringify({"order": "alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_auth_token=202004BB239812df6ca4470188d2f379e299cX19&app_id=2021001146669192&biz_content=%7B%22out_trade_no%22%3A%2200002245%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%2C%22subject%22%3A%22%E5%8F%8C%E6%9E%97%E9%A9%BE%E6%A0%A1%E6%94%B6%E6%AC%BE%22%2C%22timeout_express%22%3A%22100000m%22%2C%22total_amount%22%3A%220.01%22%7D&charset=utf-8&format=json&method=alipay.trade.app.pay&notify_url=http%3A%2F%2F60.191.54.27%3A8010%2Fn%2Falipay%2Fnotify&sign=Xf6DU5P0bl8kg0acVipXQzArrG88JbK0ot%2FHTfZ0uVTph4Xgk2A%2Fs1zoZHna1WGQMVV4JWLnXfevXJy53s1tbOf93B4B%2FtHEiVk7TCCLGvk9zmgnCTlApZ49mqz9JmQJVGaa5w%2BSSP2hwkWKoqzlidYQHwnf2cSHHH3dBM9%2FFCLmc0vFTGd1KEQrKAKNdi3zxUpy4Fxr1K4%2BdZpFbwAKgWsaPvuMtSjCHoDrHY0J2I%2FLRUSLDbeQdk840SB1aotO34F%2BzK51dDWb1lrG4D1G8I1j5P4PsL9caY49og3Ip4Rhlt2jYKRmvSR%2BFKVFvb90SeA2B6%2BI3nOXGWgfqGQrHA%3D%3D&sign_type=RSA2&timestamp=2020-04-02+18%3A18%3A02&version=1.0"});
                well.getPay(callInfo);
            }

            //人脸识别回调
            function faceResult(message){
                alert(message);
            }
            //支付宝回调
            function aliPayResult(message){
                alert(message);
            }
            //拍照回调
            function photoResult(message){
                alert(message);
            }

            function loadURL(url) {
                var iFrame;
                iFrame = document.createElement("iframe");
                iFrame.setAttribute("src", url);
                iFrame.setAttribute("style", "display:none;");
                iFrame.setAttribute("height", "0px");
                iFrame.setAttribute("width", "0px");
                iFrame.setAttribute("frameborder", "0");
                document.body.appendChild(iFrame);
                // 发起请求后这个 iFrame 就没用了，所以把它从 dom 上移除掉
                iFrame.parentNode.removeChild(iFrame);
                iFrame = null;
            }
            //调用人脸
            function firstClick() {
                //loadURL("app://shareClick?title=分享的标题&content=分享的内容&url=链接地址&imagePath=图片地址");
                //alert("app");
                //window.webkit.messageHandlers.webFace.postMessage();
                window.webkit.messageHandlers.webFace.postMessage("webFace");
            }
            //js调用native相机
            function photoClick(){
                //loadURL("photo://photoClick?title=分享的标题&content=分享的内容&url=链接地址&imagePath=图片地址");
                loadURL("webcamera://");
                //alert("fefe");
                //window.webkit.messageHandlers.webcamera.postMessage();
                window.webkit.messageHandlers.webcamera.postMessage("webcamera");
            }
            
            
            function beginLive(){
                window.webkit.messageHandlers.beginLive.postMessage("https://www.baidu.com");
            }
        
            function signOut(){
                alert("视频退出");
            }
            
            //function payJH(){
            //    loadURL("https://qr.alipay.com/bax01778hfdtkh069ujl2067");
            //}
            //聚合支付
            var payJH = function(){
                var callInfo = JSON.stringify({"jhurl": "https://qr.alipay.com/bax01778hfdtkh069ujl2067"});
                well.getJHPay(callInfo);
                
                window.webkit.messageHandlers.goReg.postMessage();
            }
        
            function goReg(){
              //  console.log(2222);
               var u = navigator.userAgent;
               var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
               var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
               //alert('是否是Android：'+isAndroid);//true/false
               //alert('是否是iOS：'+isiOS);//true/false
               if(isAndroid){
                   well.goReg();
               }
               if(isiOS){
                   window.webkit.messageHandlers.goReg.postMessage("goReg");
               }
            }
            function goBuy500(){
                window.webkit.messageHandlers.goBuy500.postMessage("goBuy500");
            }
            function bankSuccess(){
               var u = navigator.userAgent;
               var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
               var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
               //alert('是否是Android：'+isAndroid);//true/false
               //alert('是否是iOS：'+isiOS);//true/false
               if(isAndroid){
                   well.bankSuccess();
               }
               if(isiOS){
                   window.webkit.messageHandlers.bankSuccess.postMessage("bankSuccess");
               }
                
            }
        
        

        </script>
    </header>

    <body>
        <h2> JS、Native交互 </h2>
        
        <br/>
        <br/>
        <button type="button" class="yongyin"  style="width: 100px; height: 30px;" onclick="firstClick()">调用人脸!</button>
        <br/>
        <br/>
        <button type="button" class="yongyin"  style="width: 100px; height: 30px;" onclick="payClick()">调用支付!</button>
        <br/>
        <br/>
        <button type="button" class="yongyin"  style="width: 100px; height: 30px;" onclick="photoClick()">调用相机!</button>
        <br/>
        <br/>
        <button type="button" class="yongyin"  style="width: 100px; height: 30px;" onclick="payJH()">聚合支付!</button>
        <br/>
        <br/>
        <button type="button" class="yongyin"  style="width: 100px; height: 30px;" onclick="goReg()">学籍注册!</button>
        <br/>
        <br/>
        <button type="button" class="yongyin"  style="width: 100px; height: 30px;" onclick="goBuy500()">购买500题!</button>
        <br/>
        <br/>
        <button type="button" class="yongyin"  style="width: 100px; height: 30px;" onclick="beginLive()">视频播放!</button>
        <br/>
        <br/>
        <button type="button" class="yongyin"  style="width: 100px; height: 30px;" onclick="bankSuccess()">支付成功!</button>
        <br/>
    </body>
</html>